import { image } from './../service/image';
/*
 * @Author: zw
 * @Date: 2022-04-16 23:09:21
 * @LastEditors: Zhang Wei
 * @LastEditTime: 2022-04-17 23:51:39
 * @FilePath: \02_tank\src\canvas\canvasAbstract.ts
 * @Description:
 */

import config from '../config';

import PositionService from '../service/positionService';

export default abstract class CanvasAbstract {
  // 当前元素合集
  public models: IModel[] = [];

  // 渲染 抽象方法
  abstract render(): void;

  // 初始化数量
  abstract num(): number;

  // 模型
  abstract model(): ModelConstructor;

  constructor(
    protected app = document.querySelector<HTMLDivElement>('#app')!,
    protected el = document.createElement('canvas'),
    protected canvas = el.getContext('2d')!
  ) {
    this.createCanvas();
  }

  // 创建画布
  protected createCanvas() {
    this.el.width = config.canvas.width;
    this.el.height = config.canvas.height;

    // // 定义填充颜色
    // this.canvas.fillStyle = '#16a085';
    // // 填充画布
    // this.canvas.fillRect(0, 0, config.canvas.width, config.canvas.height);

    this.app.insertAdjacentElement('afterbegin', this.el);
  }

  /**
   * 绘制模型
   */
  protected createModels() {
    let num = this.num();
    let model = this.model();

    PositionService.getPositionCollection(num).forEach((position) => {
      let { x, y } = position;
      const instance = new model(this.canvas, x, y);

      this.models.push(instance);
    });
  }

  // 渲染模型
  protected renderModels() {
    this.models.forEach((model) => {
      model.render();
      // this.canvas.drawImage(
      //   model.getImg(),
      //   model.x,
      //   model.y,
      //   config.module.width,
      //   config.module.height
      // );
    });
  }
}
